<template>
  <el-card class="demo-collapse">
    <div v-for="content in types" :key="content">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item @click="tishi(content.departmentId)">
          <template #title>
            <h3>{{ content.departmentName }}</h3>
            <el-icon class="header-icon">
              <info-filled />
            </el-icon>
          </template>
          <div class="news-list">
            <div
              class="news-item"
              :body-style="{ padding: '0px' }"
              v-for="doc in doctors"
              :key="doc"
              @click="goto(doc.docId)"
            >
              <el-image :src="doc.img" class="image" />
              <div style="padding: 14px">
                <h3 class="title">{{ doc.docName }}</h3>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      types: "",
      doctors: "",
      activeName: "0",
    };
  },
  mounted() {
    this.getAllDepartments();
  },
  methods: {
    getAllDepartments() {
      get("/getAllDepartments").then((res) => {
        this.types = res.data;
        console.log(this.types);
      });
    },
    tishi(id) {
      get("/getDoctorsByDp1", { departId1: id }).then((res) => {
        this.doctors = res.data;
      });
    },
    goto(id) {
      this.$router.push({ name: "introduce", params: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-collapse {
  margin-right: 100px;
  margin-left: 100px;
}
.news-list {
  padding: 20px;
  display: flex;
 
  align-items: center;
  flex-wrap: wrap;
  margin-right: 15px;
  margin-left: 15px;
  .news-item {
    width: 250px;
    margin: 20px 5px;
    .image {
      width: 100%;
      height: 200px;
      overflow: hidden;
      cursor: pointer;
    }
    .title {
      font-weight: bold;
      width: 100%;
      margin: 0;
      padding: 0;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
      text-align: center;
      cursor: pointer;
    }
    .author {
      color: #999999;
      font-size: 12px;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
    }
  }
}
</style>
